<template>
	<div style="width: 100%;height: 100%;display: flex;flex-direction: column;">
		<div
				style="width: 100%;height: 10%; display: flex;flex-direction: row;align-items: center;justify-content: space-between;">
			<el-input style="width: 300px; margin-left: 2%" size="small" placeholder="请输入查询的无人机id"
					  v-model="droneDeviceId"></el-input>
			<el-button style="margin-right: 2%;" size="small" type="primary" @click="getVideos()">查询</el-button>
		</div>
		<el-table :data="videoData" height="75%" style="margin-left: 2%; width: 96%;">
			<el-table-column prop="videoId" label="视频id"></el-table-column>
			<el-table-column prop="videoName" label="名称"></el-table-column>
			<el-table-column prop="createTime" label="录制时间"></el-table-column>
			<el-table-column prop="duration" label="时长ms"></el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope" style="display: flex;flex-direction: row; flex-wrap: nowrap;">
					<el-button @click="handlePlay(scope.row)" type="text" size="small">播放</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="pagination">
			<ElPagination
					layout="total, prev, pager, next, jumper"
					:currentPage="queryTerms.currentPage"
					:page-size="queryTerms.size"
					:total="queryTerms.total"
					@current-change="handleCurrentChange" />
		</div>
	</div>
</template>

<script>
	import webSetInfo from "../server/webSetInfo";

	export default {
		name: "Replay",
		data() {
			return {
				videoData: [],
				userInfo: {},
				totalNumber: 0,
				droneDeviceId: null,
				queryTerms: {
					currentPage: 1,
					pageSize: 10,
					total: 0,
				},
			}
		},
		mounted() {
			this.userInfo = this.$store.state.userAllInfos;
			if (this.userInfo == null) {
				this.$router.push({
					path: '/login'
				})
			} else {
				this.getVideos();
			}
		},
		methods: {

			getVideos() {
				this.$axios_token({
					url: `${webSetInfo.apiUrl}` +  '/video/getVideoPage',
					method: "post",
					data: {
						droneDeviceId: this.droneDeviceId,
						pageSize: this.queryTerms.pageSize,
						pageNo: this.queryTerms.currentPage
					}
				}).then(res => {
					let data = res.data;
					if (res.code === 200 && data.total > 0) {
						this.loadData(data)
					}
				})
			},

			//装载data
			loadData(e) {
				this.videoData = e
				this.totalNumber += e.length
			},

			handleCurrentChange(e) {
				this.queryTerms.currentPage = e
				this.getVideo();
			},

			handlePlay(e) {
				//播放视频
				this.$router.push({
					path: '/replayPane',
					query: {
						droneDeviceId: e.droneDeviceId,
						videoId:e.videoId,
					}
				})
			},
		}
	}
</script>

<style>
</style>
